<template>
    <div class="paybox">
        <!-- 支付-头部 -->
        <div class="pay-header">
            <mt-header class="mt-header" title="支付">
                <router-link to="/" slot="left">
                <mt-button class="iconfont icon-jiantou3"></mt-button>
                </router-link>
            </mt-header>
        </div>
        <!-- 支付-结束 -->
        <!-- 支付内容-开始 -->
        <div class="pay-content">
            <p>支付方式</p>
            <ul class="paylist">
                <!-- 微信 -->
                <li class="pay-way">
                    <span class="iconfont icon-weixin"></span>
                    <i>微信</i>
                    <input type="radio" name="ral" class="ipt" checked/>
                </li>
                <!-- 支付宝 -->
                <li class="pay-way">
                    <span class="iconfont icon-zhifubao"></span>
                    <i>支付宝</i>
                    <input type="radio" name="ral" class="ipt" checked/>
                </li>
                <!-- 信用卡 -->
                <li class="pay-way">
                    <span class="iconfont icon-xinyongqia"></span>
                    <i>信用卡</i>
                    <input type="radio" name="ral" class="ipt" checked/>
                </li>
            </ul>
        </div>
        <!-- 支付内容-结束 -->
        <!-- 支付-尾部开始 -->
        <div class="pay-footer">
            <div class="footer-left">合计：<span>￥66</span></div>
            <div class="footer-right">
            <router-link to='./gopayment' tag="button" class="btn">立即付款</router-link>
        </div>
        </div>
        <!-- 支付尾部结束 -->
    </div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.paybox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .mt-header {
    width: 100%;
    height: 0.44rem;
    background: #ea9c9a;
    flex-shrink: 0
    }
    .pay-content {
        width: 100%;
        height: auto;
        flex-shrink: 1;
        p {
            width: 100%;
            height: 0.4rem;
            line-height: 0.4rem;
            font-size: 0.16rem;
            border-bottom: 0.01rem solid #ccc;
            padding-left: 0.3rem
        }
        .paylist {
            width: 100%;
            height: 2.7rem;
            // background: pink;
            padding-left: 0.3rem;
            .pay-way {
                width: 96%;
                height: 0.8rem;
                border-bottom: 0.01rem solid #eee;
                line-height: 0.8rem;
                .iconfont {
                    display: block;
                    width: 0.5rem;
                    height: 0.5rem;
                    float: left;
                    font-size: 0.4rem;
                }
                i {
                    display: block;
                    width: 1rem;
                    height: 0.3rem;
                    margin-left: 0.1rem;
                    font-size: 0.16rem;
                    float: left;
                    // background: #0ff
                }
                .ipt {
                    width: 0.2rem;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    float: right
                }
            }
        }
    }
    .pay-footer {
        width: 100%;
        height: 0.5rem;
        flex-shrink: 0;
        background: #eee;
        position: fixed;
        bottom: 0rem;
        border-top: 0.01rem solid #ccc;
        .footer-left {
            width: 1rem;
            height: 0.5rem;
            line-height: 0.5rem;
            font-size: 0.14rem;
            float: left;
            margin-left: 0.3rem
        }
        .footer-right {
            width: 0.8rem;
            height: 0.5rem;
            float: right;
            .btn {
                width: 0.8rem;
                height: 0.5rem;
                border: 0rem;
                background: #000;
                font-size: 0.16rem;
                color: #fff
            }
        }
    }
}
</style>
